<template>
    <view>
        <p class="head-tag">您的年龄</p>
        <nut-input v-model="age" placeholder="年龄" input-align="center" type="number" />
        <p class="head-tag">您预期的寿龄</p>
        <nut-input v-model="final_age" placeholder="预期的寿龄" input-align="center" type="number" />
        <p>&nbsp;</p>
        <nut-row type="flex" justify="center">
            <nut-col :span="4"></nut-col>
            <nut-col :span="16">
                <nut-button size="large" shape="square" type="primary" @click="nextStep">计算余生</nut-button>
                <nut-button size="large" shape="square" type="default" @click="reset">重置</nut-button>
            </nut-col>
            <nut-col :span="4"></nut-col>
        </nut-row>

        <p class="head-tag">&nbsp;</p>
        <nut-progress v-if="step > 0" :percentage="persent" text-inside size="large">
        </nut-progress>
        <p class="head-tag">&nbsp;</p>

        <nut-row v-if="step > 0" justify="left">
            <nut-col :span="16">
                <nut-animate :show="show_act.show1" type="slide-bottom"> 您的余生大约{{ persent > 100 ?
                    '超出' : '剩余' }}
                </nut-animate>
            </nut-col>
        </nut-row>
        <p>&nbsp;</p>
        <nut-row v-if="step > 0" justify="center">
            <nut-col :span="16"> <nut-animate :show="show_act.show1" type="slide-bottom"><span class="num">{{
                rest_live.days }}</span>
                    个日夜</nut-animate></nut-col>
            <nut-col :span="8"><nut-button v-if="step == 1" shape="square" type="info"
                    @click="nextStep">除去睡眠</nut-button></nut-col>
        </nut-row>
        <p>&nbsp;</p>
        <nut-row v-if="step > 1" justify="center">
            <nut-col :span="16" justify="center"><nut-animate :show="show_act.show1" type="slide-bottom"><span
                        class="num">{{ rest_live.wake }}</span>
                    个小时清醒</nut-animate> </nut-col>
            <nut-col :span="8"><nut-button v-if="step == 2" shape="square" type="info"
                    @click="nextStep">换算成秒</nut-button></nut-col>
        </nut-row>
        <p>&nbsp;</p>
        <nut-row v-if="step > 2" justify="center">
            <nut-col :span="16"> <span class="num">{{ rest_live.seconds }}</span> 秒</nut-col>
            <nut-col :span="8"></nut-col>
        </nut-row>
        <p class="head-tag">&nbsp;</p>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Taro from '@tarojs/taro'
const age = ref(18)
const final_age = ref(99)
const persent = ref(0)
const step = ref(0)
const rest_live = ref({
    days: 0,
    wake: 0,
    seconds: 0,
    conutDown: false
})


const show_act = ref({
    show1: false,
    show2: false,
    show3: false
})

let timer: number | null

const nextStep = () => {
    if (step.value == 0) {
        persent.value = Math.round(Math.abs(age.value) / Math.abs(final_age.value) * 100)
        console.log(persent.value);

        show_act.value.show1 = true
        rest_live.value.days = Math.abs((final_age.value - age.value) * 365)
    }
    if (step.value == 1) {
        show_act.value.show2 = true
        rest_live.value.wake = rest_live.value.days * 16
    }

    if (step.value == 2) {
        show_act.value.show3 = true
        rest_live.value.seconds = rest_live.value.wake * 3600
        if (!rest_live.value.conutDown) {
            timer = window.setInterval(conutDown, 1000);
            rest_live.value.conutDown = true;
        } else {
            if (timer) {
                clearInterval(timer);
            }
        }

    }

    if (step.value <= 4) {
        step.value += 1
    }
    scrollToB()
}

const scrollToB = () => {
    Taro.pageScrollTo({
        scrollTop: 1000,
        duration: 300
    })
}

const reset = () => {
    age.value = 0
    final_age.value = 99
    step.value = 0
    rest_live.value.conutDown = false
    if (timer) {
        clearInterval(timer);
    }

}

const conutDown = () => {
    if(age.value < final_age.value){
        rest_live.value.seconds--
    }else{
        rest_live.value.seconds += 1
    }
    
}
</script>